<template>
    <div class="ui-select">
        <div class="select-choose_wrap" @blur="onBlur"  @focus="onFocus" tabindex="1">
            <div  class="ibox select-choose_value marginL10">{{getLabel(value)}}</div>
            <i class="el-icon-arrow-down marginR10"></i>
        </div>

        <div class="select-dropdown_wrap" v-show="isShowDropdown"  tabindex="2">
            <div class="select-dropdown_item" v-for="(item,index) in options" :key="index" :data-val="item.value"  tabindex="3">
                <div class="ibox marginL10 width5 center"><span :class="{'select-dropdown_selected': item.label === value}">·</span></div>
                <div class="ibox marginL5">{{item.label}}</div>
            </div>
        </div>
    </div>
</template>
    
<script>
export default {
    name:'YSelect',
    data(){
        return {
            isShowDropdown :false,
        }
    },
    props:{
        options: Array,
        value: String
    },
    methods:{
        onBlur(e){
            this.isShowDropdown = false
            if(e.relatedTarget&&e.relatedTarget.dataset.val){
                let value = e.relatedTarget.dataset.val
                let item = this.options.filter(t=>t.value === value)
                if(item.length>0){
                    this.$emit('input', item[0].value)
                    this.$emit('change', item[0].value)
                }
            }
        },
        getLabel(value){
            let index = this.options.findIndex(t=>t.value === value)
            if(index > -1){
                return  this.options[index].label
            } else{
                value
            }
        },
        onFocus(){
            this.isShowDropdown = true
        }
    }
}
</script>

